
<%@page contentType="text/html;charset=UTF-8"   language="java"  %>
<%
  	String base = request.getContextPath();
%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Market Place</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<jsp:include page="/pages/common/include.jsp" flush="true"/>
		<link rel="stylesheet" type="text/css" href="<%=base%>/resources/css/product/list.css"/>
		<link rel="stylesheet" type="text/css" href="<%=base%>/resources/css/mui.picker.css"/>
		<link rel="stylesheet" type="text/css" href="<%=base%>/resources/css/mui.poppicker.css"/>

		<style>
			.mui-pull-bottom-pocket{
				display: none !important;
				visibility: hidden !important;
				/*bottom: 302px;*/
			}
		</style>
	</head>

	<body>
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<jsp:include page="/pages/common/menu.jsp" flush="true" />
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav" id="headBox">
					<jsp:include page="/pages/common/top.jsp" flush="true" />
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="wrap">
							<div class="classify-name">
								<a href="javascript:void(0)" class="fresh-fruits"><img src="<%=base%>/resources/images/icon/pro-apple-icon.png" />Fresh food & Deli</a>
								<a href="javascript:void(0)" class="two-fruits">
									<span>&middot;</span><em>Fruit</em>
								</a>
							</div>
							
							<div id="pickerBox" class="tab">
								<div>
									<select id="refine">
										<option value="refine">Refine</option>
										<option value="Apples">Apples</option>
										<option value="Citrus">Citrus</option>
										<option value="Melon">Melon</option>
										<option value="Pears">Pears</option>
										<option value="Soft Fruit">Soft Fruit</option>
										<option value="Tropical">Tropical</option>
									</select>
								</div>
								<div>
									<select id="sort">
										<option value="Sort by">Sort by</option>
										<option value="Apples">Apples</option>
										<option value="Citrus">Citrus</option>
										<option value="Melon">Melon</option>
										<option value="Pears">Pears</option>
										<option value="Soft Fruit">Soft Fruit</option>
										<option value="Tropical">Tropical</option>
									</select>
								</div>
							</div>
							<div class="countDisplay">746 products sort by Popuplarity</div>
							<div class="content vertical-list">
								<ul>
					            	<li>
					            		<div class="mainCon">
						            		<div class="imgBox">
						            			<img src="<%=base%>/resources/images/P_avocado.jpg" />
						            			<span><em>offer</em></span>
						            		</div>
						            		<div class="txtBox">
						            			<h4>avocado</h4>
						            			<p>30's 1ea</p>
						            			<div class="red-font">Buy 3 at 28.90</div>
						            			<div class="price orange-font">$10.90</div>
						            			<div class="num">
						            				<div class="mui-numbox" data-numbox-min='1' >
													  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													  <input class="mui-numbox-input" type="number" value="1" />
													  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
													</div>
													<div class="addCar">
														Add<img src="<%=base%>/resources/images/icon/main-shopcar.png" />
													</div>
						            			</div>
						            		</div>
					            		</div>
					            	</li>
					            	<li>
					            		<div class="mainCon">
						            		<div class="imgBox">
						            			<img src="<%=base%>/resources/images/P_apple.jpg" />
						            			<span><em>offer</em></span>
						            		</div>
						            		<div class="txtBox">
						            			<h4>china</h4>
						            			<p>apple fuji ci 1ea</p>
						            			<div class="red-font">Buy 3 at $13.90</div>
						            			<div class="red-font">$4.90</div>
						            			<div class="num">
						            				<div class="mui-numbox" data-numbox-min='1' >
													  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													  <input class="mui-numbox-input" type="number" value="1" />
													  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
													</div>
													<div class="addCar">
														Add<img src="<%=base%>/resources/images/icon/main-shopcar.png" />
													</div>
						            			</div>
						            		</div>
					            		</div>
					            	</li>
					            	<li>
					            		<div class="mainCon">
						            		<div class="imgBox">
						            			<img src="<%=base%>/resources/images/P_dragon_fruit.jpg" />
						            			<span><em>offer</em></span>
						            		</div>
						            		<div class="txtBox">
						            			<h4>vietname</h4>
						            			<p>dragon fruit\24's 1ea</p>
						            			<div class="red-font">Buy 3 at 13.90</div>
						            			<div class="price orange-font">$5.00</div>
						            			<div class="num">
						            				<div class="mui-numbox" data-numbox-min='1' >
													  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													  <input class="mui-numbox-input" type="number" value="1" />
													  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
													</div>
													<div class="addCar">
														Add<img src="<%=base%>/resources/images/icon/main-shopcar.png" />
													</div>
						            			</div>
						            		</div>
					            		</div>
					            	</li>
					            	<li>
					            		<div class="mainCon">
						            		<div class="imgBox">
						            			<img src="<%=base%>/resources/images/P_blueberry.jpg" />
						            			<span><em>offer</em></span>
						            		</div>
						            		<div class="txtBox">
						            			<h4>naturipe</h4>
						            			<p>blueberry 125gm</p>
						            			<div class="red-font">Discounted</div>
						            			<div class="red-font">$16.90</div>
						            			<div class="num">
						            				<div class="mui-numbox" data-numbox-min='1' >
													  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													  <input class="mui-numbox-input" type="number" value="1" />
													  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
													</div>
													<div class="addCar">
														Add<img src="<%=base%>/resources/images/icon/main-shopcar.png" />
													</div>
						            			</div>
						            		</div>
					            		</div>
					            	</li>
								</ul>
							</div>
							<div class="pageNum">
								Currently displaying 1-4 of 746 products
							</div>
							<div class="look-more">
								<img src="<%=base%>/resources/images/icon/more-icon.png" />load more
							</div>
							<div class="footer" id="footer">
								<jsp:include page="/pages/common/footer.jsp" flush="true" />
							</div>
						</div>
					</div>
				</div>
				
				<!--searchbar-->
				<div class="searchBar">
					<jsp:include page="/pages/common/search.jsp" flush="true" />
				</div>
				
				<div class="rightBottom animate"></div>
				
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="<%=base%>/resources/js/product/two-data.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="<%=base%>/resources/js/product/list.js" ></script>
		<script>
		
			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			
			$(function(){
				$('.two-fruits em').html(sessionStorage.getItem('oneClassifyName'));
			})
		</script>
		<script>
			$(window).scroll(function(){
				var top=$('#footer').offset().top;
				if(top<=($(window).height()-100)){
					var str="";
					for(var i=0;i<2;i++){
						str+='<li>'+
		            		'<div class="mainCon">'+
			            		'<div class="imgBox">'+
			            			'<img src="<%=base%>/resources/images/P_avocado.jpg" />'+
			            			'<span><em>offer</em></span>'+
			            		'</div>'+
			            		'<div class="txtBox">'+
			            			'<h4>avocado</h4>'+
			            			'<p>30\'s + 1ea</p>'+
			            			'<div class="red-font">Buy 3 at $28.90</div>'+
			            			'<div class="price orange-font">$10.90</div>'+
			            			'<div class="num">'+
			            				'<div class="mui-numbox" data-numbox-min="1" >'+
										  '<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>'+
										  '<input class="mui-numbox-input" type="number" value="1" />'+
										  '<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>'+
										'</div>'+
										'<div class="addCar">'+
											'Add<img src="<%=base%>/resources/images/icon/main-shopcar.png" />'+
										'</div>'+
			            			'</div>'+
			            		'</div>'+
		            		'</div>'+
		            	'</li>'
					}
					$('.content.vertical-list ul').append(str);
				}
			})
		</script>
	</body>

</html>